<template>
    <view class="page-content">
        <view class="page-content-body">
            <!-- 聊天列表 -->
            <view class="chat-list" v-if="chatList.length > 0">
                <view class="chat-list-item" v-for="item in chatList" :key="item.id" @click="handleChatClick(item)">
                    <!-- 头像 -->
                    <view class="chat-list-avatar">
                        <image :src="item.avatar" mode="aspectFill" />
                    </view>

                    <!-- 聊天内容 -->
                    <view class="chat-list-content">
                        <view class="chat-list-name">{{ item.name }}</view>
                        <view class="chat-list-message">{{ item.lastMessage }}</view>
                    </view>

                    <!-- 右侧信息 -->
                    <view class="chat-list-right">
                        <view class="chat-list-time">{{ item.timestamp }}</view>
                        <view class="chat-list-notification" v-if="item.hasNotification"></view>
                    </view>
                </view>
            </view>

            <!-- 空状态 -->
            <view class="chat-empty" v-else-if="!loading">
                <image class="chat-empty-icon" src="/static/chat/user_avatar.png" mode="aspectFit" />
                <text class="chat-empty-text">暂无聊天记录</text>
            </view>

            <!-- 加载状态 -->
            <view class="chat-loading" v-if="loading">
                <text class="chat-loading-text">加载中...</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {getChatList} from '@/mock/index.js';

// 响应式数据
const chatList = ref([]);
const loading = ref(false);

// 获取聊天列表数据
const fetchChatList = async () => {
    try {
        loading.value = true;
        const response = await getChatList();
        if (response.code === 200) {
            chatList.value = response.data;
        }
    } catch (error) {
        console.error('获取聊天列表失败:', error);
        uni.showToast({
            title: '获取聊天列表失败',
            icon: 'none',
        });
    } finally {
        loading.value = false;
    }
};

// 处理聊天项点击
const handleChatClick = (item) => {
    uni.$u.route({url: '/pages/chat/chat', params: {id: item.id}});
};

// 页面加载时获取数据
onMounted(() => {
    fetchChatList();
});
</script>

<style lang="scss" scoped>
@import '@/styles/chat.scss';
</style>
